<template>
    <div>
<!--        精品网课-->
        <div class="zg_jpkc">
            <div class="zg_jpkbt">
                <a href="/list/?price=1" target="_blank" class="zg_jpbta">更多</a>
                <ul class="zg_jpnav">
                    <li class="zg_jpn11 on">精品网课</li>
                    <li class=""><a href="/list-180/?price=1" target="_blank">互联网营销</a></li>
                    <li class=""><a href="/list-191/?price=1" target="_blank">设计</a></li>
                    <li class=""><a href="/list-187/?price=1" target="_blank">Web前端</a></li>
                    <li class=""><a href="/list-195/?price=1" target="_blank">程序开发</a></li>
                    <li class=""><a href="/list-199/?price=1" target="_blank">Office</a></li>
                </ul>
            </div>
            <div class="zg_jpbox">
                <ul class="zg_jpkcu" style="display: block;">
                    <li v-for="course in payCourses.records" :key="course.id">
                        <div class="zg_jpkclt">
                            <a :href="course.image">
                                <img :src="course.image" :title="course.title" :alt="course.title">
                            </a>
                        </div>
                        <h6>
                            <a href="#">
                                {{course.title}} </a>
                        </h6>
                        <p>
                            <span>{{course.countHour}}课时</span>
                            <font><i>￥</i>{{showItemPrice(course.price)}}</font>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
<!--        免费课程-->
        <div class="zg_jpkc">
            <div class="zg_jpkbt">
                <a href="/list/?price=2" target="_blank" class="zg_jpbta">更多</a>
                <ul class="zg_jpnav">
                    <li class="zg_jpn11 on">免费课程</li>
                    <li class=""><a href="/list-180/?price=2" target="_blank">互联网营销</a></li>
                    <li class=""><a href="/list-191/?price=2" target="_blank">设计</a></li>
                    <li class=""><a href="/list-187/?price=2" target="_blank">Web前端</a></li>
                    <li class=""><a href="/list-195/?price=2" target="_blank">程序开发</a></li>
                </ul>
            </div>
            <div class="zg_jpbox zg_jpbox1">
                <ul class="zg_jpkcu" style="display: block;">
                    <li v-for="course in freeCourses.records" :key="course.id">
                        <div class="zg_jpkclt">
                            <a :href="course.image">
                                <img :src="course.image" :title="course.title" :alt="course.title">
                            </a>
                        </div>
                        <h6>free
                            <a href="#">
                                {{course.title}} </a>
                        </h6>
                        <p>
                            <span>{{course.countHour}}课时</span>
                            <font><i>￥</i>{{showItemPrice(course.price)}}</font>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
<!--        就业面授班-->
        <div class="zg_jpkc">
            <div class="zg_jpkbt">
                <a href="/list/?kj_mianshou=1" target="_blank" class="zg_jpbta">更多</a>
                <ul class="zg_jpnav">
                    <li class="zg_jpn11 on">就业面授班</li>
                    <li class><a href="/list-180/?kj_mianshou=1" target="_blank">互联网营销</a></li>
                    <li class=""><a href="/list-197/?kj_mianshou=1" target="_blank">Java</a></li>
                    <li class=""><a href="/list-421/?kj_mianshou=1" target="_blank">大数据开发</a></li>
                    <li class=""><a href="/list-279/?kj_mianshou=1" target="_blank">软件测试</a></li>
                </ul>
            </div>
            <div class="zg_jpbox zg_jpbox1">
                <ul class="zg_jpkcu" style="display: block;">
                    <li v-for="course in faceCourses.records" :key="course.id">
                        <div class="zg_jpkclt">
                            <a :href="course.image">
                                <img :src="course.image" :title="course.title" :alt="course.title">
                            </a>
                        </div>
                        <h6>free
                            <a href="#">
                                {{course.title}} </a>
                        </h6>
                        <p>
                            <span>{{course.countHour}}课时</span>
                            <font><i>￥</i>{{showItemPrice(course.price)}}</font>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
    import {getCourseApi} from "../network/course";
    import {getFaceCourseApi} from "../network/course";

    export default {
        name:'PayCourse',
        data:function () {
            return {
                payCourses:[],
                freeCourses:[],
                faceCourses:[]
            }
        },
        created() {
            this.getPayCourse(),
                this.getFreeCourse(),
                this.getFaceCourses()

        },
        methods:{
            //价格为0显示免费，
            showItemPrice:function (price) {
                if(price==0){
                    return '免费'
                }
                return (price/100).toFixed(2)
            },
            getPayCourse:function () {
                getCourseApi(1)
                .then(res=>{
                    console.log(res);
                    this.payCourses = res
                })
            },
            getFreeCourse:function () {
                getCourseApi(2)
                    .then(res=>{
                        console.log(res);
                        this.freeCourses = res
                    })
            },
            getFaceCourses:function () {
                getFaceCourseApi(3)
                    .then(res=>{
                        console.log(res);
                        this.faceCourses = res
                    })
            }

        }
    }
</script>